<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增网络连接记录')" />
    <th:block th:include="include :: datetimepicker-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-log-add">
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">IP地址：</label>
                    <div class="col-sm-8">
                        <input name="ip" class="form-control" type="text">
                    </div>
                </div>
            </div>
            <div class="col-xs-12">
                <div class="form-group">
                    <label class="col-sm-3 control-label">指定端口：</label>
                    <div class="col-sm-8">
                        <label class="toggle-switch switch-solid">
                            <input type="checkbox" id="type"> <!-- 移除name属性，不再提交到后台 -->
                            <span></span>
                        </label>
                    </div>
                </div>
            </div>
            <!-- 将端口输入框包裹在一个可控制显示/隐藏的div中 -->
            <div class="col-xs-12" id="portContainer" style="display: none;"> <!-- 添加style="display: none;"默认隐藏 -->
                <div class="form-group">
                    <label class="col-sm-3 control-label">端口号：</label>
                    <div class="col-sm-8">
                        <input name="port" class="form-control" type="text">
                    </div>
                </div>
            </div>
        </form>
        
        <!-- 功能说明区域 -->
        <div class="col-xs-12 m-t">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>功能使用说明</h5>
                </div>
                <div class="ibox-content">
                    <p class="text-muted">本页面用于添加新的网络连接记录，您可以按照以下步骤使用指定端口功能：</p>
                    <ul class="list-group m-t">
                        <li class="list-group-item">1. 在"IP地址"输入框中输入目标主机的IP地址</li>
                        <li class="list-group-item">2. 默认不开启"指定端口"功能，系统将使用默认端口进行连接</li>
                        <li class="list-group-item">3. 如需指定特定端口，请点击"指定端口"开关，此时端口输入框将显示</li>
                        <li class="list-group-item">4. 在端口输入框中输入有效的端口号（1-65535之间的整数）</li>
                        <li class="list-group-item">5. 点击提交按钮完成网络连接记录的添加</li>
                    </ul>
                    <div class="text-danger m-t">注意：开启指定端口功能后，必须输入有效的端口号才能提交表单。</div>
                </div>
            </div>
        </div>
        
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var prefix = ctx + "test/netinfo"
        
        // 初始化时设置type的值和端口容器的可见性
        $(function() {
            // 初始设置type的值为0（默认不选中）
            updateTypeValue();
            // 确保根据初始状态设置端口容器的可见性
            togglePortContainer();
        });
        
        // 监听type复选框的变化事件
        $('#type').change(function() {
            updateTypeValue();
            togglePortContainer();
            // 重新验证表单，以确保必填规则的正确应用
            $('#form-log-add').valid();
        });
        
        // 更新type的值（现在不需要添加隐藏字段，仅控制UI）
        function updateTypeValue() {
            // 移除添加隐藏字段的逻辑，不再提交type值到后台
            return; // 简化为直接返回
        }
        
        // 切换端口容器的显示/隐藏
        function togglePortContainer() {
            var portContainer = $('#portContainer');
            if ($('#type').is(':checked')) {
                portContainer.show();
            } else {
                portContainer.hide();
            }
        }
        
        // 表单验证
        $(function() {
            // 定义验证规则
            $.validator.addMethod("portRequired", function(value, element) {
                // 只有当type复选框选中时，port才是必填的
                if ($('#type').is(':checked')) {
                    return $.trim(value) !== '';
                }
                return true;
            }, "请输入端口号");
            
            // 应用验证规则
            $("#form-log-add").validate({
                focusCleanup: true,
                rules: {
                    port: {
                        portRequired: true,
                        digits: true, // 确保输入的是数字
                        range: [1, 65535] // 确保端口号在有效范围内
                    }
                }
            });
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-log-add').serialize());
            }
        }

        $("input[name='connectTime']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
    </script>
</body>
</html>